<template>
  <div class="page" style="overflow: auto; position: absolute">
    <div class="top">
      <div class="image">
        <img :src="img" alt="">
      </div>
      <div class="user">{{ name }}</div>
      <img src="https://cdn7.axureshop.com/demo/1763441/images/%E6%88%91/u4928.png" alt="" class="image2" />
      <div class="phone">123****1111</div>
      <div class="button">
        <div class="focus" @click="followAction">
          <span>{{ follows }}</span>
          <div>关注</div>
        </div>
        <div class="save" @click="CollectAction()">
          <span>{{ number }}</span>
          <div>收藏</div>
        </div>
      </div>
    </div>
    <div class="content">
      <van-cell value="" v-for="(item, index) in texts" :key="index" class="item" is-link @click="enter(index, item)">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="icons[index]"></use>
          </svg>
          <span class="custom-title">{{ item }}</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { Cell } from "vant";
import "../../assets/icon/mineicon/iconfont.js";
import axios from "axios";
import { numFollowApi } from "../../api/follow";
import { getinfo } from "../../api/getinfo.js";
import { mapState } from "vuex";
import img from '../../assets/images/2.jpg';
export default {
  components: {
    [Cell.name]: Cell,
  },
  data() {
    return {
      texts: [
        "挂号订单",
        "校验检查订单",
        "报告单",
        "住院订单",
        "我的处方",
        "电子健康卡",
        "体检订单",
        "咨询订单",
        "银行卡管理",
        "账号设置",
      ],
      icons: [
        "#icon-yuyueguahao",
        "#icon-dingdan2",
        "#icon-bgd",
        "#icon-dingdan1",
        "#icon-chufang-01",
        "#icon-dianzijiankangka",
        "#icon-dingdan",
        "#icon-jianqianchulichulijiancha",
        "#icon-yinhangqia",
        "#icon-zhanghaoshezhi",
      ],
      img: img,
      name: "",
      follows: "",
    };
  },
  computed: {
    ...mapState("collectList", {
      number: "num",
    }),
  },
  methods: {
    enter(index, item) {
      // console.log(index);
      // console.log(item);
      // 传递item到路由，元信息
      // this.$route.meta.title = item;
      // console.log("===>", this.$route);
      if (index == 0 || index == 3 || index == 6) {
        this.$router.push({ name: "indent", params: { item } });
      } else if (index == 1 || index == 2 || index == 4) {
        this.$router.push({ name: "report", params: { item } });
      } else if (index == 5 || index == 8) {
        this.$router.push({ name: "electronic-card", params: { item } });
      } else if (index == 7) {
        this.$router.push({ name: "consultation-order", params: { item } });
      } else if (index == 9) {
        console.log(item);
        this.$router.push({ name: "account-settings", params: { item } });
      } else {
        console.log("====>");
      }
    },
    CollectAction() {
      this.$router.push({ name: "collect", params: { text: "收藏" } });
    },
    followAction() {
      this.$router.push({ name: "follows", params: { item: "关注" } });
    },
    async numfollow() {
      try {
        const { data } = await numFollowApi()
        this.follows = data.data.length
      } catch (error) {
        console.log(error);
      }
    },
    imgs() {
      return img
    }
  },

  created() {
    this.numfollow()
    //获取用户信息
    getinfo().then((res) => {
      // console.log(res);

      console.log(res);
      this.img = res.data.datas.img;
      this.name = res.data.datas.username;
    });

    // 获取收藏的数量
    this.$store.dispatch("collectList/collectData");
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.page {
  background-color: rgba(242, 242, 242, 1);
  overflow: auto;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }

  // display: flex;
  // flex-direction: column;
}

.top {
  width: 100%;
  height: vw(251);
  background-color: rgba(46, 199, 201, 1);

  .image {
    position: absolute;
    left: vw(39);
    top: vw(80);
    width: vw(40);
    height: vw(40);

    img {
      width: vw(40);
      height: vw(40);
      border-radius: 50%;
    }
  }

  .user {
    border-width: 0px;
    position: absolute;
    left: vw(89);
    top: vw(87);
    font-family: "方正粗黑宋简体";
    font-weight: 400;
    font-style: normal;
    color: #ffffff;
    font-size: vw(14);
  }

  .image2 {
    border-width: 0px;
    position: absolute;
    left: vw(128);
    top: vw(88);
    width: vw(17);
    height: vw(13);
  }

  .phone {
    border-width: 0px;
    position: absolute;
    left: vw(89);
    top: vw(111);
    font-family: "微软雅黑";
    font-weight: 400;
    font-style: normal;
    font-size: vw(13);
    color: #ffffff;
    font-size: vw(13);
  }

  .button {
    width: vw(300);
    height: vw(74);
    background-color: rgba(255, 255, 255, 1);
    position: absolute;
    top: vw(178);
    left: vw(39);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-width: 1px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    span {
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
      font-weight: 700;
      font-size: vw(24);
      margin: vw(3) vw(0);
    }

    div {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.content {
  margin-top: vw(10);
  width: 100%;
  margin-bottom: vw(49);

  .item {
    width: 100%;
    height: vw(64);
    font-size: vw(24) !important;
    display: flex;
    align-items: center;
    padding-left: vw(30);

    span {
      font-size: vw(15) !important;
      margin-left: vw(5);
    }

    .van-cell__title {
      display: flex;
      align-items: center;
    }

    .van-icon {
      margin-right: vw(10);
    }
  }
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
